<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 html()        无参--功能：获取匹配元素集合中第一个元素
		               有参--功能：【设置】获取匹配元素集合中所有元素并替换
		特点：添加元素+内容
		 val()         无参--功能：针对表单元素：input、select、、
		                          获取第一个表单元素的值【value】
		               有参--功能：针对表单元素：input、select、、
					              设置表单元素的值 input直接设置
								                 select不能直接设置  只能设置原有值
		特点：表单元素+内容、下拉列表只能添加存在value的值
		 text()        无参--获取匹配元素集合中所有文本内容
		               有参--【设置】获取匹配元素集合中所有文本内容做替换
		 特点：添加内容
		 
		 -->
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>html()函数  有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		
		<h1>val()函数使用</h1>
		<button class="btn1">val()函数 【input】 无参</button>
		<br />
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="文本框提示" >
		<!-- html: 按钮 .btn2  select>option*3  
		     jq：  按钮点击  显示第一个表单元素值
		-->
		<br />
		<button class="btn2">val 【select】无参</button>
		<button class="btn3">val 【select】有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text函数使用：包裹内容：文本</h1>
		<button class="btn5">text函数 无参</button>
		<button class="btn6">text函数 有参</button>
		<p>lorem5</p>
		<p>lorem6</p>
		<p>lorem7</p>
		<script>
			//抓无参数按钮 点击 打印p的text值
			//抓有参按钮 点击 改变p中文本的内容 改变效果
			$(".btn5").click(function(){
				var ptext=$("p").text();
				alert("ptext")
			});
			
			$(".btn6").click(function(){
				$("p").text("改变效果");
			});
				//$(".btn3").click(function(){
				//	var ins=$("select").val("rem1");
				// 抓取打印select的js对象： 是一个默认字符串形式表示【object object】
				// 抓取select的js对象 调用对象toString（）方法  如果没有重写【object object】
				//设置  第一个position 的 value值
				//    $("select").val("rem1");
				//	var ins=$("select").val();
				//	alert("val()针对input元素 无参"+ins);
				//});
				
				
				
		//	$(".btn2").click(function(){
		//		var ins=$("select").val();
		//		alert("val()针对input元素 无参"+ins);
		//	});
			
			
			
		//	$(".btn1").click(function(){
		//		/*变量名 不允许使用关键字  js中关键字 for in 遍历数组*/
		//	 var ins=$("input").val();
		//	 alert("val()针对input元素 无参"+ins);
		//	});
			
			
			
			//按钮 点击按钮 实现 span内容 改成lorem lorem
		//	$("button").click(function(){
		//		$("span").html("<span>lorem<span/>");
		//	});
			
			/*变量    js变量--jq
			int i=1；java写法 强类型语言
			var i=数值  元素； javascript   弱类型语言
			*/
		 //  var html=$("span").html();
		 //  alert("html()函数的无参值"+html);
		</script>
	</body>
</html>